<template>
    <div class="tech-count-down">
        <div class="count-down-item count-down-day">{{ parseValue.days }}天</div>
        <div class="count-down-item count-down-hour">{{ parseValue.hours }}</div>
        <div class="count-down-item count-down-minute">{{ parseValue.minutes }}</div>
        <div class="count-down-item count-down-second">{{ parseValue.seconds }}</div>
        <!-- <div class="count-down-second">{{ parseValue.milliseconds }}</div> -->
    </div>
</template>

<script>
import ModeMixin from '@common/mixin';
import { parseTime } from '@biztools/time';
export default {
    name: 'CountDown', // 倒计时
    mixins: [ModeMixin],
    props: {
        time: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            timeValue: 0,
        };
    },
    computed: {
        parseValue() {
            return parseTime(this.timeValue);
        },
    },
    created() {
        this.timeValue = this.$props.time;
        this.tiemInterval = setInterval(() => {
            this.timeValue -= 100;
        }, 100);
    },
    destroyed() {
        clearInterval(this.tiemInterval);
    },
};
</script>

<style lang="less">
.tech-count-down {
    .flex();
    .count-down-item {
        height: 22px;
        line-height: 22px;
        padding: 0 @gap;
        background-color: rgba(37,37,50,0.60);
        .m-r(@gap);
        position: relative;
        .border-radius();
        color: @white;
        font-size: @shop-font-size-sm;
        &::after {
            content: ":";
            position: absolute;
            right: -6px;
            color: rgba(51, 51, 51, .5);
        }
        &:last-child {
            &::after {
                content: "";
            }
        }
    }
}
</style>
